<template>

    <el-dialog :title="form.id ? '编辑大纲' : '新增大纲'" style="width: 324px;" modal-class="dialog-add" v-model="dialogVisible"
        @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
        <!--form表单-->
        <el-form size="small" ref="form" label-width="80px" :model="form" :rules="formRules">
            <el-form-item label="父级" prop="parent_id">
                <el-cascader style="width: 200px;" :disabled="form.id ? true : false" :options="outlineList"
                    v-model="form.parent_id" :props="{ checkStrictly: true, label: 'title', value: 'id' }"
                    :show-all-levels="false" clearable />
            </el-form-item>
            <el-form-item label="名称" prop="title">
                <el-input style="width: 200px;" maxlength="30" v-model="form.title" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="onSubmit" :loading="loading">保存</el-button>
                <el-button @click="dialogVisible = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import CourseApi from '@/api/course.js';
export default {
    data() {
        return {
            /*左边长度*/
            formLabelWidth: '140px',
            /*是否显示*/
            loading: false,
            /*是否显示*/
            dialogVisible: true,
            /*form表单对象*/
            form: {
                title: '',
                parent_id: [],
                id: ''
            },
            careeList: [],
            /*form验证*/
            formRules: {
                parent_id: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    }
                ],
                title: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
            },
            disabledCascaderValues: [],
            outlineList: [],
        };
    },
    props: ['targetForm', 'directionTitle'],
    created() {
        this.getTreeList()
    },
    methods: {
        getTreeList() {
            let self = this;
            let Params = {};
            Params.career_id = this.targetForm.career_id
            Params.level_id = this.targetForm.level_id
            Params.direction_id = this.targetForm.direction_id
            CourseApi.getNestedData(Params, true)
                .then(data => {
                    console.log(this.directionTitle, 'directionTitle')
                    self.loading = false;
                    const list = [{
                        title: self.directionTitle || '',
                        id: 0,
                        children: data.data && data.data.map(item => {
                            item.children && item.children.map(childrenItem => {
                                childrenItem.children = []
                                return childrenItem
                            })
                            return item
                        })
                    }]
                    self.outlineList = list
                    // 过滤第三级

                })
                .catch(error => { console.log(error) });
        },
        setTitle({ parent_id = 0, title, id, ids = '' }) {
            this.form.title = title;
            this.form.id = id
            if (ids) {
                this.form.parent_id = [0, ids, parent_id];
            } else if (parent_id === 0) {
                this.form.parent_id = [parent_id]
            } else {
                this.form.parent_id = [0, parent_id];
            }

        },
        /*添加*/
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    let self = this;
                    self.loading = true;
                    let params = { ...self.form };
                    let key = 'outlineStore'
                    let msg = '新增成功'
                    if (self.form.id) {
                        key = 'outlineUpdate'
                        msg = '编辑成功'
                    }
                    params.career_id = this.targetForm.career_id
                    params.level_id = this.targetForm.level_id
                    params.direction_id = this.targetForm.direction_id
                    params.parent_id = params.parent_id && params.parent_id.length ? params.parent_id[params.parent_id.length - 1] : 0
                    CourseApi[key](params, true)
                        .then(data => {
                            self.loading = false;
                            ElMessage({
                                message: msg,
                                type: 'success'
                            });
                            self.dialogFormVisible(true);
                        })
                        .catch(error => {
                            self.loading = false;
                        });
                }
            });
        },

        /*关闭弹窗*/
        dialogFormVisible(e) {
            if (e) {
                this.$emit('close', {
                    type: 'success',
                    openDialog: false
                });
            } else {
                this.$emit('close', {
                    type: 'error',
                    openDialog: false
                });
            }
        }
    }
};
</script>